<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	body {
		height: 100vh;
	}
	.iconfont {
		font-family: 'icomoon';
		position: absolute;
		color: #000;
		font-size: 15px;
		user-select: none;
	}
</style>
<body>
	
	<script>
		var baba = document.querySelector('body');
		baba.addEventListener('click', function (e) {
			tianJia(e);
		})
		
		var erZi = [];
		function tianJia(e) {
			var sunZi = document.createElement('div');
			sunZi.className = 'iconfont';
			sunZi.innerHTML = '<span class="icon-douyinxiaohuohua"></span>';
			baba.appendChild(sunZi);
			
			erZi.push({
				el : sunZi,
				top : e.clientY - 20,
				left : e.clientX - 20,
				opacity : 1,
				scale : 1,
				color : `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
			});
			move();
		};
		function move() {
			for ( var i = 0; i < erZi.length; i++ ) {
				if ( erZi[i].opacity <= 0 ) {
					baba.removeChild(erZi[i].el);
					erZi.splice(i, 1);
					return;
				}
				erZi[i].top--;
				erZi[i].opacity = erZi[i].opacity - 0.01;
				erZi[i].scale = erZi[i].scale + 0.02;
				erZi[i].el.style.cssText = `
            top: ${erZi[i].top}px;
            left: ${erZi[i].left}px;
            color: ${erZi[i].color};
            opacity: ${erZi[i].opacity};
            transform: scale(${erZi[i].scale});`
				
			}
			window.requestAnimationFrame(move);
		}
	
	</script>
</body>
</html>
